<template>
	<div class="el-tabs">
		<div class="navbar">
			<div v-for="(item, index) in live.menuList" @click="handleClick(index,item)" :key="index">
				<span :class="activeNum==index?'active':''" class="menuSpan" v-if="index==0" :style="{color:liveInfo.labelColor,borderColor:liveInfo.labelColor}">{{item.menuName}}</span>
				<span :class="activeNum==index?'active':''" class="menuSpan" v-else>{{item.menuName}}</span>
			</div>
		</div>
		<div class="tabsContent">
			<Chat v-show="chatShow" ref="chat"></Chat>
			<Pdf :url="usr.menuUrl" v-if="activeName==6"></Pdf>
			<Intro :url="usr" v-if="activeName==1"></Intro>
			<Additional :url="usr.menuUrl" v-if="activeName==5"></Additional>
			<RelativePlay :url="usr.videos" v-if="activeName==4" @play="VideoToPc" @changeLive="bankLiveForPc"></RelativePlay>
			<Broadcast v-if="activeName==7"></Broadcast>
		</div>
	</div>
</template>

<script>
	import Chat from "@/components/comm/chat"; //聊天
	import Pdf from "@/components/comm/pdf"; //pdf文档
	import Intro from "@/components/comm/intro"; //图文
	import Additional from "@/components/comm/additional"; //超链接
	import RelativePlay from "@/components/comm/relativePlay"; //视频
	import Broadcast from "@/components/comm/broadcast"; //图文直播
	export default {
		data() {
			return {
				activeNum: 0,
				activeName: 0,
				chatShow: false,
				items: [],
				usr: "",
			};
		},
		components: {
			Chat,
			Pdf,
			Intro,
			Additional,
			RelativePlay,
			Broadcast,
		},
		computed: {
			liveInfo() {
				return this.$store.state.liveInfo
			},
			live() {
				if (this.$store.state.liveInfo.menuSwitch == 1) {
					return this.$store.state.live;
				} else {
					return []
				}
			},
			countdownshow() {
				return this.$store.state.countdownshow; //pc端右侧背景显隐
			},
		},
		created() {
			setTimeout(() => {
				if (this.$store.state.liveInfo.menuSwitch == 1) {
					if (this.$store.state.live.menuList.length > 0) {
						this.menuinfo(this.$store.state.live.menuList[0].id)
					}
				}
			}, 200)
		},
		methods: {
			menuinfo(id) {
				this.$http
					.get(this.$api.menuinfo(), {
						params: {
							menuId: id
						}
					})
					.then(res => {
						if (res.data.code == 0) {
							this.activeName = res.data.menuInfo.menuType;
							this.usr = res.data.menuInfo
						}
					});
			},
			VideoToPc(url) {
				this.$emit("playPc", url);
			},
			bankLiveForPc(value) {
				this.$emit("changeLivePc", true);
			},
			handleClick(index, item) {
				this.menuinfo(item.id)
				if (item.menuType == 2) {
					this.chatShow = true;
				} else {
					this.chatShow = false;
				}
				this.activeName = item.menuType;
				this.activeNum = index;
				this.usr = item;
				let obj = document.getElementsByClassName("menuSpan")
				let arr = [];
				for (let i = 0; i < obj.length; i++) {
					obj[i].style.color = "#888888";
				}
				obj[index].style.color = this.$store.state.liveInfo.labelColor;
				obj[index].style.borderColor = this.$store.state.liveInfo.labelColor;
			},
		}
	};
</script>
<style lang="less" rel=stylesheet/less scoped="scoped">
	.navbar {
		display: flex;
		align-items: center;
		width: 100%;
		background: #fff;
		height: 40px;
		line-height: 40px;

		div,
		span {
			cursor: pointer;
			display: block;
			margin: auto;
			height: 40px;
			font-size: 16px;
			color:#888888;
		}
	}

	.active {
		border-bottom: 3px solid;
		background: #fff;
	}

	.el-tabs {
		position: relative;
		height: 100%;
	}
</style>
